<template>
	<view>
	 
		<view v-for="(item,index) in mallList" :key="index" class="pList" @click="getDetail(item.tradeno)">
		    <view class="pList_con">订单号:{{item.tradeno}}</view>
			<view class="content">
				<view class="pList_left" ><image :src="`${uniConfig.ssoPath + item.logoList[0]}`" mode="widthFix"/></view>
				<view class="pList_right">
					<view class="pList_text">
						<text class="text">{{ item.productName }}</text>
						<view>订单金额:<text style="color:red;">￥{{item.orderTotalAmount}}</text></view>
					</view>
				</view>
		    </view>
			<view class="pList_bot">
				<view>{{item.addTime}}</view>
				<view class="right_bot" :class="item.payStatus == 'N'?'topay':''" @click="item.payStatus == 'N'?goPay(item):getDetail(item.tradeno)">{{item.payStatus == 'N'?'去支付':item.orderStatusText}}</view>
			</view>
		</view>
		<view class="lastchild"></view>
	</view>
</template>

<script setup lang="ts">
const app = getApp()
import { ref,getCurrentInstance } from 'vue'
import { getMallList } from "@/api/product"
import { onLoad } from "@dcloudio/uni-app"
import { uniConfig } from '@/config/index'
    const viewData = ref<any>([])
	const mallList = ref<any>([])
	const current= 0
	const mode = 'round' 
	 
	const getDetail = (value:any) =>{
		uni.navigateTo({
		   url: `/pages/mine/detailMall?tradeno=${value}`
		})
	}

	const goPay = (res : any) => {
		uni.navigateTo({
			url:`/pages/mall/orderConfirm?tradeno=${res.tradeno}`
		})
	}

	onLoad(async (options : any) => {
		const { proxy } = getCurrentInstance();
	    await proxy.$onLaunched;
		getMallList(options).then(res=>{
			if(res.success){
				mallList.value = res.data.records
			}
		})
		
	})
</script>

<style lang="scss">
	 
	.pList{
	    width: 92%;
		margin: 32rpx auto 0;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 0px 12px rgba(0,0,0,.1);
		align-items: center;
		border-radius: 9px;
		padding: 32rpx;
		box-sizing: border-box;
	}
	.lastchild{
		margin-bottom:32rpx;
	}
	.pList_right{
		display: flex;
		align-items: center;
	}
    .pList_left image{
		width: 168rpx;
		height: 168rpx;
		border-radius: 9px;
		margin-right:32rpx;
	}
	.pList_text{
		display: flex;
		flex-direction: column;
		justify-content: center;
		.text{
			font-weight: 600;
			margin-bottom:24upx;
			color:#000;
		}
	} 
	.swiper-box{
		width:90%;
		margin-left:5%;
		height:400rpx;
		border-radius: 9px;
		overflow: hidden;
	}
	.swiper-item image{
	    width:100%;	
	}
	.pList_con{
		padding-top: 15rpx;
		font-size: 30rpx;
		font-weight: bold;
		padding-bottom: 32rpx;
		margin-bottom: 32rpx;
		border-bottom: 1px solid #eee;
	}
	.content{
		display: flex;
		width: 100%;
		margin: 0 auto;
		border-bottom: 0.1rem solid #eee;
		padding-bottom: 32rpx;
		align-items: center;
	}
	.pList_bot{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 70rpx;
		line-height: 70rpx;
		padding-top: 32rpx;
	}
	.right_bot{
		text-align:center;
	    width:30%;
		height:60rpx;
		line-height:60rpx;
		border-radius:1rem;
		background-color:#e7e6e6;
	}
	.topay{
		background:rgb(245,238,182);
		color:#fff;
	}
</style>